
<template>
    <v-container>
        <Breadcrumb>
            <SecondFunc 
            :title="title"
            :formConfig="formConfig"
            :initialData="initialData"
            @optSave="saveData"
            />
        </Breadcrumb>

        <dynamic-table
            :title="title"
            :data="data"
            :columns="columns"
            @optEdit="editData"
            @optDel="delData"
            @optSave="saveData"
        />
    </v-container>
    
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { getGroupList, delGroup, createGroup, updateGroup, queryGroup } from '@/api';
import DynamicTable from '@/components/common/dynamicTable/index.vue';
import Breadcrumb from '@/components/common/breadcrumb/index.vue';
import SecondFunc from '@/components/common/secondFunc/index.vue';
import { changeCommonId, changeCurLabel, changeIsShowCreateButton, changeIsEdit } from '@/assets/js/common'
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { useStore } from 'vuex'



const title = ref('group')
const store = useStore()
let data = ref([])
let columns = ref([
    { prop: 'id', label: 'ID', width: "auto", sortable: true, fixed: "fixed" },
    { prop: 'name', label: '姓名', width: "auto" },
    { prop: 'desc', label: '描述', width: "auto" },
    { prop: 'state', label: '状态', width: "auto" },
    { prop: 'update_time', label: '更新时间', width: "auto" },
    { prop: 'create_time', label: '创建时间', width: "auto" },
])
let formConfig = ref([
    {
        label: '名称',
        name: 'name',
        ktype: "input",
        styleSet: ''
    },{
        label: '描述',
        name: 'desc',
        ktype: 'input',
        styleSet: ''
    },{
        label: '状态',
        name: 'state',
        ktype: 'switch',
        styleSet: ''
    }
])
let initialData = ref({})

onMounted(()=>{
    changeCurLabel("分组管理")
    queryList()
})

onBeforeUnmount(() => {
    changeCommonId(0)
})

function queryList() {
    try {
        getGroupList().then((res)=>{
            data.value = res.data
        })
    } catch (error) {
        console.log("request error:", error)
    }
}

function editData(id){
    try {
        changeCommonId(id)
        queryGroup({id: id}).then((resp)=>{
            let res = resp.data
            if ( res ) {
                for (var i=0; i<Object.keys(res).length; i++) {
                    initialData.value[Object.keys(res)[i]] = res[Object.keys(res)[i]]
                }
            }
        })
    } catch (error) {
        console.log("Fetch group data error:", error)
    }
}

function saveData(saveData){
    if (store.getters.getIsEdit){
        updateGroup(saveData).then(()=>{
            ElMessage({
                title: "Update " + title.value,
                type: "primary",
                message: '更新成功'
            })
        })
    } else {
        createGroup(saveData).then(()=>{
            ElMessage({
                title: "Create " + title.value,
                type: "warning",
                message: '创建成功'
            })
        })
    }
    queryList()
}


function delData(id){
    if (confirm('确定要删除这个记录么吗？')) {
        try {
            delGroup({id: id}).then(()=>{
                queryList()
                ElMessage({
                    title: "Del " + title.value,
                    type: "primary",
                    message: '删除成功'
                })
            })
        } catch (error) {
            console.error('Error deleting group:', error)
        }
    }
}
</script>
